@import '../../assets/css/reset.css';
@import'../../assets/css/common.css';
@import '../../assets/css/property.css';
@import'../../assets/js/swiper/swiper-bundle.min.css';
/* 头 */

.head{
    border-color: #00bdff;
   
    a{
        color: #666  !important;
    }
    .sy{
        border-color: #00bdff;
        color: #00bdff !important;
    }
    .btn2{
        color: #fff !important;
    }
}
/* 分类 */
.sort{


   .title{
    font-size: 28px;
    color: #3d3e3e;
    line-height: 74px;
    margin-top: 26px;
}
.navs{
    width: 100%;
    height: 72px;
    display: flex;
    flex-wrap: wrap;
    a{
        padding: 0 15px;
        color: #666;
        border: 1px solid #666;
        border-radius:10px;
        box-sizing: border-box; 
        margin-right: 10px;
        margin-bottom: 10px;
        line-height: 26px;
    }
    .active{
        color: #00bdff;
        border: 1px solid #00bdff;
    }
}
.more-name{
    height: 32px;
    margin-top: 10px;
    // position: relative;
    margin-bottom: 26px;
    span{
        display: block;
        color: #3d3e3e;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
    }
   
    .ss-box{
        height: 30px;
    width: 230px;
    position: relative;

    }
    input{
        height: 30px;
        width: 230px;
        border-radius: 15px;
        border: none;
        background: #f4f4f4;
        margin-left: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }
    a{  display: block;
        width: 30px;
        height: 30px;  
      
        position: absolute;
        right:-5px;
        bottom: -4px;
    }
}

/* 图片区 */
ul{
width: 100%;
height: 1128px;
// background: skyblue;
flex-wrap: wrap;
justify-content: space-between;

li{
    width: 228px;
    height: 270px;
    background: #fff;
    border: 1px solid #eee;
    font-size: 12px;
   position: relative;
    text-align: center;
   overflow: hidden;
   .green{
    color: green !important;
}
.red{
    color: red !important;
}
   span{
       position: absolute;
       width: 58px;
       height: 22px;
       line-height: 22px;
       top: 10px;
       left: 10px;
       color: #00bdff;
       background: #e5f8ff !important;
   }
    .png-box{
        width: 228px;
        height: 167px;
        cursor: pointer;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
        transition: all 400ms linear;
       
        .mianfei{
            margin: 10px 0;
            color: #42c890; 
        }
        .fangyi{
            margin: 10px 0;
            color: #666 ;
        }
    }
    .bottom-box{
        cursor: pointer;
        width: 80%;
        height: 30px;
        background: #00bdff;
        position: absolute;
        bottom: 0;
        left: 10%;
        line-height: 30px;
        color: #fff;
        bottom: -30px;
        transition: all 340ms linear;
    }
}
li:hover .bottom-box{
    transform: translateY(-50px)
}
li:hover .png-box{
    transform: translateY(-10px)
}
}
   } 
   .num{
    width: 100%;
    height: 150px;
    // background: rgb(223, 210, 210);
    position: relative;
    .nums{
        width: 430px;
        height: 24px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        color: #000;
        a{
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
        }
        
        a:hover{
            background: #00bdff;
            color: #fff;
            border-radius: 50%;
        }
        .goto{
            width: 60px;
            height: 24px;
        }
        .goto:hover{
            background: rgba(0, 0, 0, 0) ;
            color: #00bdff ;
        }
    }
}



.foot{
    background: #f8f8f8;
}
/* 蒙层模态框 */
html,body{
    width: 100%;
    height: 100%;
  
}
.mask{
   
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    .lg-rightbox{
        width: 40%;
        height: 100%;
        // background:#fff;
        position: relative;
        margin: 0,auto;
        div{
            width: 400px;
            height: 550px;
            background:#fff;
            position: absolute;
            display: flex;
           align-items: center;
            flex-direction: column;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto; 
            .a-top{
                display: block;
                margin:  0 auto;
                position: absolute;
                top:50px;
            }
            ul{
                height: 44px;
                width: 295px;
                display: flex;
                // background: #1ca8ef;
                justify-content: center;
                position: absolute;
                top: 130px;
                .zhdl{
                    color: #1ca8ef;
                }
                // .smdl{
                //     color: #1ca8ef !important;
                // }
               li{
                cursor: pointer;
                   width: 70px;
                   height: 44px;
                   text-align: center;
                   line-height: 44px;
                   font-size: 16px;
                   color: #555;
                .s1{
                    display: block;
                    width: 60px;
                    height: 3px;
                    background: #1ca8ef;
                    margin-left: 5px;
                }
                .s2{
                    display:none;
                    width: 60px;
                    height: 3px;
                    background: #1ca8ef;
                    margin-left: 5px;
                }
               }
            } 
        .login-box{
            width: 300px;
            height: 242px;
            // background: #1ca8ef;
            position: absolute;
          top: 115px;
          display: block;
          .ren{
              position: absolute;
              left: 5px;
              top:5px;
              color: #1ca8ef;
              font-size: 30px;
              font-weight: bold;
          }
          .suo{
            position: absolute;
            left: 5px;
            top:70px;
            color: #1ca8ef;
            font-size: 30px;
            font-weight: bold;
          }
          input{
              width: 300px;
              height: 35px;
              line-height:center;
              text-indent: 3em;
              border: none;
              border-bottom: 1px solid #e7e7e7; 
          }
         
          .delete1{
              position: absolute;
              right: 5px;
              top:10px;
              cursor: pointer;
              display: none;
          }.delete2{
            position: absolute;
            right: 5px;
            top:75px;
            cursor: pointer;
            display: none;
        }
        /* 账号密码错误提示 */
        .zh-ts{
            display: block;
            height: 27px;
            color: red;
            padding-top: 8px;
        }
        .ma-ts{
            display:block;
            height: 27px;
            color: red;
            padding-top: 8px;
        }

        .wj{
            position: absolute;
            right: 0;
            top: 138px;
            color: #1ca8ef;
        }
        .btn{
            width: 300px;
            height: 46px;
            position: absolute;
            top: 180px;
            right: 0px;
            background: #1ca8ef;
            color: #fff;
            cursor: pointer;
        }
        p{
            position: absolute;
            top: 245px;
            right: 30px;
            a{
                font-weight: bold;
            }
            button,a{
                color: #1ca8ef;
                cursor: pointer;
            }
        }    
        }
        .code{
            width: 360px;
            height: 242px;
            // background: #1ca8ef;
            position: absolute;
          top: 115px;
          display: none;
        .code-box{
            width: 290px; ;
            height: 241px;
            background-color: #fcfcfc;
            border: 1px solid #eee;
            img{
                margin-top: 20px;
                width: 120px;
                height: 120px;
                margin-bottom: 15px;
            }
            p{
                color: #000;
                margin-bottom: 15px;
            }
        }
        .b-p{
                padding-left: 33px;
             margin-top: 260px;
            a{
                font-weight: bold;
            }
            button,a{
                color: #1ca8ef;
                cursor: pointer;
            }
        }    
        }
             
            }
          
        }
}

